<template>
  <div class="container">
    <el-card class="video-card" v-for="video in videos" :key="video.id">
      <img :src="video.cover_url" class="image" alt="" @click="$router.push('/videos/' + video.id)">
      <span>{{ video.title }}</span>
    </el-card>
  </div>
</template>

<script>

export default {
  name: "VideoCards",
  data() {
    return {
      'video': {},
    }
  },
  props: ['videos'],
}
</script>

<style scoped>
.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 200px 200px 200px;
  height: 550px;
}

.video-card {
  border: solid 1px;
  margin: 10px;
}

.image {
  width: 100%;
  display: block;
}

.image:hover {
  cursor: pointer;
}
</style>